<template>
  <view class="friend-item">
    <view class="friend-avatar">
      <image 
        v-if="friend.avatar" 
        :src="friend.avatar" 
        class="avatar-image"
        mode="aspectFill"
      />
      <text v-else class="avatar-text">{{ friend.name.charAt(0) }}</text>
      <view class="presence-indicator" :class="friend.isOnline ? 'online' : 'offline'"></view>
    </view>
    
    <view class="friend-info">
      <view class="friend-header">
        <text class="friend-name">{{ friend.remark || friend.name }}</text>
        <text class="last-seen">{{ lastSeenText }}</text>
      </view>
      <text class="friend-status" :class="friend.isOnline ? 'online' : 'offline'">
        {{ friend.isOnline ? '在线' : '离线' }}
      </text>
      <view class="last-message">
        <text class="message-preview">{{ messagePreview }}</text>
        <text v-if="friend.lastMessageTime" class="message-time">{{ messageTimeText }}</text>
      </view>
    </view>
    
    <view class="friend-actions">
      <button 
        class="action-btn-small" 
        @click.stop="$emit('chat')"
        title="开始聊天"
      >
        💬
      </button>
      <button 
        class="action-btn-small" 
        @click.stop="$emit('options')"
        title="更多选项"
      >
        ⋯
      </button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'FriendCard',
  props: {
    friend: {
      type: Object,
      required: true
    }
  },
  computed: {
    lastSeenText() {
      return this.formatLastSeen(this.friend.lastSeen)
    },
    messagePreview() {
      return this.friend.lastMessage || this.friend.email
    },
    messageTimeText() {
      return this.formatTime(this.friend.lastMessageTime)
    }
  },
  methods: {
    formatLastSeen(lastSeen) {
      if (!lastSeen) return ''
      const now = new Date()
      const lastSeenDate = new Date(lastSeen)
      const diffMs = now - lastSeenDate
      const diffMins = Math.floor(diffMs / 60000)
      
      if (diffMins < 1) return '刚刚在线'
      if (diffMins < 60) return `${diffMins}分钟前在线`
      
      const diffHours = Math.floor(diffMins / 60)
      if (diffHours < 24) return `${diffHours}小时前在线`
      
      const diffDays = Math.floor(diffHours / 24)
      if (diffDays < 7) return `${diffDays}天前在线`
      
      return '很久未上线'
    },
    
    formatTime(timestamp) {
      if (!timestamp) return ''
      const date = new Date(timestamp)
      const now = new Date()
      const diffMs = now - date
      const diffMins = Math.floor(diffMs / 60000)
      
      if (diffMins < 1) return '刚刚'
      if (diffMins < 60) return `${diffMins}分钟前`
      
      const diffHours = Math.floor(diffMins / 60)
      if (diffHours < 24) return `${diffHours}小时前`
      
      const month = date.getMonth() + 1
      const day = date.getDate()
      return `${month}月${day}日`
    }
  }
}
</script>

<style scoped>
.friend-item {
  display: flex;
  align-items: center;
  padding: 24rpx 20rpx;
  background: white;
  border-bottom: 1rpx solid #f5f5f5;
  transition: background 0.3s ease;
}

.friend-item:active {
  background: #f8f9fa;
}

.friend-avatar {
  position: relative;
  width: 88rpx;
  height: 88rpx;
  margin-right: 20rpx;
}

.avatar-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.avatar-text {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 32rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.presence-indicator {
  position: absolute;
  bottom: 2rpx;
  right: 2rpx;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  border: 3rpx solid white;
}

.presence-indicator.online {
  background: #52c41a;
}

.presence-indicator.offline {
  background: #d9d9d9;
}

.friend-info {
  flex: 1;
  min-width: 0;
}

.friend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.friend-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.last-seen {
  font-size: 20rpx;
  color: #999;
}

.friend-status {
  font-size: 22rpx;
  margin-bottom: 6rpx;
}

.friend-status.online {
  color: #52c41a;
}

.friend-status.offline {
  color: #999;
}

.last-message {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.message-preview {
  flex: 1;
  font-size: 22rpx;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-time {
  font-size: 20rpx;
  color: #ccc;
  margin-left: 12rpx;
}

.friend-actions {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  margin-left: 16rpx;
}

.action-btn-small {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #f5f5f5;
  border: none;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  padding: 0;
}

.action-btn-small:active {
  transform: scale(0.9);
  background: #e8e8e8;
}
</style>

